<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <!-- 绑定值 -->
        <cpn1  v-bind:cmovies="movies" :cmessage="message"></cpn1>
        <cpn1 :cmessage="message"></cpn1>
        
    </div>
    
    <script>
        // 父传子：props
        const cpn1 = {
            template: `
            <div>
                <p>{{cmovies}}</p>
                <p>{{cmessage}}</p>
            </div>
            `,
            // props: ['cmovies', 'cmessage'],
            // 1. 类型限制           
        //     props: {
        //        cmovies: Array,
        //        cmessage: String
        //    }
            // 2. 给一个默认值(没有绑定值时 default 才生效)
            props: {
                cmovies: {
                    type: Array,
                    default: function(){ // 数组等对象要求使用函数
                        return []
                    }
                },
                cmessage: {
                    type: String,
                    default: "cmessage",
                    required: true // required 属性： 必须在使用时绑定cmessage参数
                }
            }
        }
        // Vue实例：父组件
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello",
                movies: ['movie1', 'movie2', 'movie3', 'movie4']
            },
            components: {
                cpn1 // 子组件
            }
        });
    </script>
</body>
</html>